<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <title>Document</title>
</head>
<body>

    <div id="app">
        {{message}}
    </div>

    <div id="app-2">
        <span v-bind:title="message">
            查看
        </span>
    </div>

    <div id="app-3">
        <p v-if="seen">你看到我了</p>
    </div>

    <div id="app-4">
        <ol>
            <li v-for="todo in todos">
                {{todo.text}}
            </li>
        </ol>
    </div>

    <div id="app-5">
        <p>{{message}}</p>
        <button v-on:click="reverseMessage">逆转消息</button>
    </div>

    <div id="app-6">
        <p>{{message}}</p>
        <input v-model="message">
    </div>

    <div id="app-7">
        <ol>
            <todo-item v-for="item in groceryList"
                v-bind:todo="item"
                v-bind:key = "item.x">
            </todo-item>
        </ol>
    </div>

    <div id="app-8">
        {{a}}
    </div>
    
//使用官方vue-cli脚手架书写
<div id="app-9">
    //观察数据为字符串或数组<br/>
    <input v-model="example0" /><br/>
    <input v-model="example1" /> 　　/当单观察数据examples2为对象时，如果键值发生变化，为了监听到数据变化，需要添加deep:true参数<br/>
    <input v-model="example2.inner0" /><br/>
</div>

<div id="app10">
    <input v-model="test" />
</div>
<script>

</script>

    <script src="../js/index.js"></script>
</body>
</html>